<template>
  <div class="placeholder">
    404 | 页面未找到
  </div>
</template>

<script setup>

import Img  from "./iocn.svg"
import {onMounted} from "vue";

/**
 * 传入照片来获取照片中的主色调 可以传入一个图片元素，也可以传入一个图片的 URL
 * @param {HTMLImageElement} img - 要分析的图片元素 https://img.php.cn/upload/article/000/000/164/169270111231761.jpg 兼容跨域图片
 * @returns {number[]} - 包含 RGB 值的数组
 */
const getImgMainColor = async (img) => {
  let imageElement;
  if (typeof img === 'string') {
    // 如果传入的是 URL，则创建一个新的图片元素
    imageElement = new Image();
    imageElement.crossOrigin = 'anonymous'; // 处理跨域图片
    await new Promise((resolve, reject) => {
      imageElement.onload = resolve;
      imageElement.onerror = reject;
      imageElement.src = img;
    });
  } else {
    imageElement = img;
  }

  // 创建一个新的 canvas 元素
  const canvas = document.createElement('canvas');
  // 获取 canvas 的 2D 上下文
  const ctx = canvas.getContext('2d');
  // 设置 canvas 的宽度为图片的宽度
  canvas.width = imageElement.width;
  // 设置 canvas 的高度为图片的高度
  canvas.height = imageElement.height;
  // 在 canvas 上绘制图片
  ctx.drawImage(imageElement, 0, 0, imageElement.width, imageElement.height);
  // 获取 canvas 上图片的像素数据
  const data = ctx.getImageData(0, 0, imageElement.width, imageElement.height).data;
  // 用于存储非透明像素的 RGB 值
  const colorArr = [];
  // 遍历像素数据，每 4 个元素为一组（RGBA）
  for (let i = 0; i < data.length; i += 4) {
    // 获取红色通道的值
    const r = data[i];
    // 获取绿色通道的值
    const g = data[i + 1];
    // 获取蓝色通道的值
    const b = data[i + 2];
    // 获取透明度通道的值
    const a = data[i + 3];
    // 如果像素不是完全透明的
    if (a > 0) {
      // 将 RGB 值添加到 colorArr 中
      colorArr.push([r, g, b]);
    }
  }
  // 用于存储每种颜色的出现次数
  const colorObj = {};
  // 遍历 colorArr 中的每种颜色
  colorArr.forEach((color) => {
    // 将 RGB 值转换为字符串作为键
    const key = color.join(',');
    // 如果该颜色已经在 colorObj 中
    if (colorObj[key]) {
      // 增加该颜色的计数
      colorObj[key]++;
    } else {
      // 否则，初始化该颜色的计数为 1
      colorObj[key] = 1;
    }
  });
  // 用于记录出现次数最多的颜色的计数
  let max = 0;
  // 用于记录出现次数最多的颜色的键
  let maxKey = '';
  // 遍历 colorObj 中的每个键值对
  for (const key in colorObj) {
    // 如果当前颜色的计数大于 max
    if (colorObj[key] > max) {
      // 更新 max 为当前颜色的计数
      max = colorObj[key];
      // 更新 maxKey 为当前颜色的键
      maxKey = key;
    }
  }
  // 将 maxKey 拆分为数组，并将每个元素转换为整数
  return maxKey.split(',').map((item) => parseInt(item));
};
onMounted(async () => {
  let color = await  getImgMainColor(Img)
  console.log(`rgba(${color.join(',')})`)
});
</script>

<style scoped lang="scss">
.placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 150px; /* 修改字体大小 */
    color: #ffffff; /* 修改字体颜色 */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    background: linear-gradient(135deg, #ff7e5f, #feb47b); /* 添加渐变背景颜色 */
    //border-radius: 20px; /* 增加圆角边框半径 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
    padding: 20px; /* 添加内边距 */
    //animation: pulse 2s infinite; /* 添加动画效果 */
}

@keyframes pulse {
    0% {
        transform: scale(1) translateY(0);
    }
    50% {
        transform: scale(1.05) translateY(-10px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}
</style>
